<template>
  <div class="containe">
    <div class="content">
      <div class="item">
        <div class="cell">今日</div>
        <div class="cell" v-for="item,index in this.resData.goodsToday" :key="index">
          <div>{{item.name}}: {{item.num}} (件)</div>
        </div>
      </div>
      <div class="item">
        <div class="cell">已售</div>
        <div class="cell" v-for="item,index in this.resData.todaySell" :key="index">
          <div>{{item.name}}: {{item.num}} (件)</div>
        </div>
      </div>
      <div class="item">
        <div class="cell">明日</div>
        <div class="cell" v-for="item,index in this.resData.goodsTomorrow" :key="index">
          <div>{{item.name}}: {{item.num}} (件)</div>
        </div>
      </div>
      <div class="item">
        <div class="cell">总数</div>
        <div class="cell" v-for="item,index in this.resData.stockNum" :key="index">
          <div>{{item.gvName}}: {{item.count}} (件)</div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>

    <div class="bottom">
      <div class="bottom-box">
        <div class="header cell" v-if="resData.goodsTypeNum">兑换商品: {{resData.goodsTypeNum[0].total}} (件)</div>
        <div class="count cell"></div>
      </div>
      <div class="bottom-box">
        <div class="header cell" v-if="resData.artOrderToday">今日兑换: {{resData.artOrderToday.num}}(件)</div>
        <div class="count cell"></div>
      </div>
      <div class="bottom-box">
        <div class="header cell" v-if="resData.artOrderHistory">历史兑换: {{resData.artOrderHistory.num}} (件)</div>
        <div class="count cell"></div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  props: ['resData']
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;

  .item {
    width: 25%;
    display: flex;
    flex-direction: column;
  }
}
.bottom {
  display: flex;

  .bottom-box {
    width: 33%;
    display: flex;
    flex-direction: column;
  }
}
.cell {
  line-height: 28px;
  font-size: 14px;
  font-weight: bold;
}
</style>